<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" >

    <link rel="stylesheet" href="/css/main.css" />
    <script src="/js/uikit.js"></script>
</head>

<body>

<div th:insert="~{common::#header}"></div>

<div class="uk-section uk-section-muted">
  <div class="uk-container">
    <ul class="uk-breadcrumb">
      <li><a href="index.html">所有文章</a></li>
      <li><span>文章列表</span></li>
    </ul>

    <div class="uk-margin-medium-top">

      <div class="uk-card uk-card-category uk-card-default uk-card-hover uk-card-body uk-inline uk-border-rounded uk-width-1-1" th:each="article:${categoryArticleVos}">
        <a class="uk-position-cover" th:href="'/article/detail?articleId=' + ${article.articleId}"></a>
        <h3 class="uk-card-title uk-margin-remove uk-text-primary" th:text="${article.articleName}"></h3>
        <p class="uk-margin-small-top" th:text="${article.zhaiYao}"></p>
        <div class="uk-article-meta uk-flex uk-flex-middle">
          <img class="uk-border-circle uk-avatar-small" style="height: 36px;width: 36px;" th:src="'/' + ${article.headImg}" alt="">
          <div>
            本篇文章创建于：
            <time class="uk-margin-small-right" th:text="${#dates.format(article.createTime, 'yyyy-MM-dd hh:mm:ss')}"></time><br>
            更新于：<time  th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd hh:mm:ss')}"></time>
          </div>
        </div>
      </div>

    </div>
    <div class="uk-text-center uk-margin-medium-top">

    </div>    
  </div>
</div>

<div th:insert="~{common::#footer}"></div>
<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>


</body>

</html>